<!--模板开始-->
<style type="text/css">

.showwords 
{
    font-size: 25px;
    position: absolute;
    z-index: 1;
    top: 98%;
    margin: -39px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    letter-spacing: 5px;
    color: black;
    font-weight: bolder;
    text-shadow:3px 3px 10px white, -3px 3px 10px white, 3px -3px 10px white, -3px -3px 10px white;
    left: 39px;
    text-align: center;
    /*background-color: rgba(255, 255, 255, 0.4);*/
}
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    /*background-color: black;*/
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;

}
#container > div,#container > img
{
    position: absolute;
    
}
#zi,#item1-5
{
    left: 25px;
    top: 15px;
    /*z-index: 5;*/
    position: absolute;
}
.page
{
    width: 500px;
    height: 815px;
    position: absolute;
    z-index: 6;
}
.page > div, .page > img
{
    position: absolute;
    opacity: 0;
}
#item1-1
{
    left: 0px;
    top: 295px;
}
#item1-2
{
    left: 353px;
    top: 568px;

}
#item1-3
{
    left: 0px;
    top: 711px;

}
#item1-4
{
    left: 390px;
    top: 231px;
}
#div1h
{
    width: 435px;
    height: 350px;
    background-color: #9c9c9c;
    border: 19px solid #fff;
    -webkit-transform: rotate(-7deg);
    left: 35px;
    top: 337px;
    position: absolute;
    overflow: hidden;
}
#div1v
{
    width: 367px;
    height: 500px;
    background-color: #9c9c9c;
    border: 19px solid #fff;
    -webkit-transform: rotate(-6deg);
    left: 75px;
    top: 245px;
    position: absolute;
    overflow: hidden;
}

.grid__item
{
    width: 440px;
    position: absolute;
    z-index: 100;
    left: 30px;
    top: 400px;
    text-align: center;
    
    /*text-shadow: 0px 0px 5px #fff;*/
}
#item0-2
{
    left: 367px;
    top: 298px;
}
#item0-1
{
    left: 0px;
    top: 577px;
}
</style>

<style type="text/css">
    @-webkit-keyframes aaa_in_bounce_center
    {
        0%{
            opacity:0;
            -webkit-transform:scale(.3)
        }
        50%{
            opacity:1;
            -webkit-transform:scale(1.05)
        }
        70%{
            -webkit-transform:scale(.9);
            opacity: 1;
        }
        100%{
            -webkit-transform:scale(1);
            opacity: 1
        }
    }
    @-webkit-keyframes aaa_out_bounce_center
    {
        0%{
            -webkit-transform:scale(1);
            opacity: 1
        }
        25%{
            -webkit-transform:scale(.95);
            opacity: 1;
        }
        50%{
            opacity:1;
            -webkit-transform:scale(1.1)
        }
        100%{
            opacity:0;
            -webkit-transform:scale(.3)
        }
    }
    
/*---往下跳---*/
    @-webkit-keyframes aaa_in_bounce_down
    {
        0%{
            opacity:0;
            -webkit-transform:translateY(-2000px)
        }
        60%{
            opacity:1;
            -webkit-transform:translateY(30px)
        }
        80%{
            -webkit-transform:translateY(-10px);
            opacity: 1;
        }
        100%{
            -webkit-transform:translateY(0);
            opacity: 1
        }
    }

    @-webkit-keyframes aaa_out_bounce_down
    {
        0%{
            -webkit-transform:translateY(0);
            opacity: 1;
        }
        20%{
            opacity:1;
            -webkit-transform:translateY(-20px)
        }
        100%{
            opacity:0;
            -webkit-transform:translateY(2000px)
        }
    }
/*---往上跳---*/
    @-webkit-keyframes aaa_in_bounce_up
    {
        0%{
            opacity:0;
            -webkit-transform:translateY(2000px)
        }
        60%{
            opacity:1;
            -webkit-transform:translateY(-30px)
        }
        80%{
            -webkit-transform:translateY(10px);
            opacity: 1
        }
        100%{
            -webkit-transform:translateY(0);
            opacity: 1
        }
    }
    @-webkit-keyframes aaa_out_bounce_up
    {
       0%{
        -webkit-transform:translateY(0);
        opacity: 1;
        }
        20%{
            opacity:1;
            -webkit-transform:translateY(20px)
        }
        100%{
            opacity:0;
            -webkit-transform:translateY(-2000px)
        }
    }   
/*---往左跳---*/
    @-webkit-keyframes aaa_in_bounce_left
    {
        0%{
            opacity:0;
            -webkit-transform:translateX(-2000px)
        }
        60%{
            opacity:1;
            -webkit-transform:translateX(30px)
        }
        80%{
            -webkit-transform:translateX(-10px);
            opacity: 1;
        }
        100%{
            -webkit-transform:translateX(0);
            opacity: 1
        }
    }
    @-webkit-keyframes aaa_out_bounce_left
    {
        0%{
            -webkit-transform:translateX(0);
            opacity: 1;
        }
        20%{
            opacity:1;
            -webkit-transform:translateX(20px)
        }
        100%{
            opacity:0;
            -webkit-transform:translateX(-2000px)
        }
    }

/*---往右跳---*/
    @-webkit-keyframes aaa_in_bounce_right
    {
        0%{
            opacity:0;
            -webkit-transform:translateX(2000px)
        }
        60%{
            opacity:1;
            -webkit-transform:translateX(-30px)
        }
        80%{
            -webkit-transform:translateX(10px);
            opacity: 1;
        }
        100%{
            -webkit-transform:translateX(0);
            opacity: 1
        }
    }
    @-webkit-keyframes aaa_out_bounce_right
    {
        0%{
            -webkit-transform:translateX(0);
            opacity: 1;
        }
        20%{
            opacity:1;
            -webkit-transform:translateX(-20px)
        }
        100%{
            opacity:0;
        -webkit-transform:translateX(2000px)
        }
    }


</style>
<style type="text/css">


#item2-1
{
    left: 0px;
    top: 248px;
}
#item2-2
{
    left: 0px;
    top: 638px;
}
#item2-3
{
    left: 387px;
    top: 673px;
}
#item2-4
{
    left: 366px;
    top: 0px;
}
#item2-5
{
    left: 23px;
    top: 433px;
    width: 450px;
}
#div2h
{
    width: 434px;
    height: 320px;
    background-color: #9c9c9c;
    border: 20px solid #fff;
    left: 27px;
    top: 70px;
    -webkit-transform: rotate(-5deg);
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    overflow: hidden;
}
#div2v
{
    width: 340px;
    height: 459px;
    background-color: #9c9c9c;
    border: 20px solid #fff;
    left: 79px;
    top: 3px;
    -webkit-transform: rotate(-5deg);
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    overflow: hidden;
}
#item3-1
{
    left: 14px;
    top: 0px;
}
#item3-2
{
    left: 14px;
    top: 287px;
}
#item3-3
{
    left: 0px;
    top: 610px;
}
#item3-4
{
    left: 127px;
    top: 713px;
}
#item3-5
{
    left: 348px;
    top: 530px;
}
#item3-6
{
    left: 413px;
    top: 280px;
}
#div3h
{
    width: 434px;
    height: 320px;
    background-color: #9c9c9c;
    border: 20px solid #fff;
    left: 27px;
    top: 350px;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    -webkit-transform: rotate(-1deg);
    overflow: hidden;
}
#div3v
{
    width: 350px;
    height: 479px;
    background-color: #9c9c9c;
    border: 20px solid #fff;
    left: 80px;
    top: 268px;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    -webkit-transform: rotate(-1deg);
    overflow: hidden;
}
#div3
{
    width: 500px;
    height: 815px;
}
#item4-1
{
    width: 390px;
    left: 15px;
    top: -2px;
}
#item4-2
{
    left: 0px;
    top: 498px;
}
#item4-3
{
    left: 11px;
    top: 686px;
}
#item4-4
{
    left: 93px;
    top: 740px;
}
#item4-5
{
    left: 380px;
    top: 289px;
}
#item4-6
{
    left: 386px;
    top: 135px;
}
#div41h
{
    width: 364px;
    height: 272px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 21px;
    top: 234px;
    position: absolute;
    -webkit-transform: rotate(-5deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div42h
{
    width: 350px;
    height: 283px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 130px;
    top: 471px;
    position: absolute;
    -webkit-transform: rotate(4deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    /* opacity: 0; */
}
#div41v
{
    width: 281px;
    height: 373px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 48px;
    top: 159px;
    position: absolute;
    -webkit-transform: rotate(-5deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div42v
{
    width: 270px;
    height: 362px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 207px;
    top: 411px;
    position: absolute;
    -webkit-transform: rotate(4deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#item5-1
{
    left: 0px;
    top: 250px;
}
#item5-2
{
    left: 0px;
    top: 711px;
}
#item5-3
{
    left: 48px;
    top: 512px;
    width: 420px;
}
#item5-4
{
    left: 303px;
    top: 710px;
}
#item5-5
{
    left: 399px;
    top: 130px;
}
#item5-6
{
    width: 64px;
    left: 317px;
    top: 95px;
}
#div51h
{
width: 325px;
    height: 250px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 14px;
    top: 20px;
    position: absolute;
    -webkit-transform: rotate(3deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
    /* opacity: 0; */
}
#div52h
{
    width: 390px;
    height: 294px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 98px;
    top: 245px;
    position: absolute;
    -webkit-transform: rotate(-4deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div51v
{
    width: 250px;
    height: 332px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 36px;
    top: -2px;
    position: absolute;
    -webkit-transform: rotate(3deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div52v
{
    width: 280px;
    height: 387px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 197px;
    top: 221px;
    position: absolute;
    -webkit-transform: rotate(-4deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#item6-1
{
    left: 36px;
    top: -10px;
    width: 390px;
}
#item6-2
{
    left: 0px;
    top: 545px;
}
#item6-3
{
    left: -30px;
    top: 670px;
    width: 174px;
}
#item6-4
{
    left: 367px;
    top: 210px;
}
#item6-5
{
    left: 397px;
    top: 334px;
}
#div61h
{
    width: 366px;
    height: 273px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 18px;
    top: 236px;
    position: absolute;
    -webkit-transform: rotate(-2deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div62h
{
    width: 356px;
    height: 265px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 131px;
    top: 489px;
    position: absolute;
    -webkit-transform: rotate(-5deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div61v
{
    width: 270px;
    height: 362px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 30px;
    top: 199px;
    position: absolute;
    -webkit-transform: rotate(-2deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
#div62v
{
    width: 270px;
    height: 360px;
    background-color: #9c9c9c;
    border: 15px solid #fff;
    left: 205px;
    top: 418px;
    position: absolute;
    -webkit-transform: rotate(4deg);
    border-radius: 5px 5px 5px 5px;
    overflow: hidden;
}
.img
{
    position: absolute;
}
.divbox
{
    box-shadow: 5px 5px 3px rgba(191,191,191,0.4);
}
@-webkit-keyframes fallinga
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
    to    {-webkit-transform: translate(0px,900px) rotate(500deg);opacity: 1}
} 
</style>

<div id='container'>
    <img src='{$skinurl}skin/shengri/bg.jpg'>

    <div id='page1' class='page'>
        <img id='item1-5' src='{$skinurl}skin/shengri/zi.png'>
        <div id='div1'>
            <div id='div1h' class='divbox'>
                <img id='img1h' class='img'>
                <span id='word1h' class='showwords'></span>
            </div>
            <div id='div1v' class='divbox'>
                <img id='img1v' class='img'>
                <span id='word1v' class='showwords'></span>
            </div>
        </div>

        <img id='item1-1' src='{$skinurl}skin/shengri/hua11.png'>
        <img id='item1-2' src='{$skinurl}skin/shengri/hua32.png'>
        <img id='item1-3' src='{$skinurl}skin/shengri/liwu1.png'>
        <img id='item1-4' src='{$skinurl}skin/shengri/mao1.png'>
    </div>

    <div id='page2' class='page'>
        <img id='item2-5' src='{$skinurl}skin/shengri/zi.png'>

        <div id='div2'>
            <div id='div2h' class='divbox'>
                <img id='img2h' class='img'>
                <span id='word2h' class='showwords'></span>
            </div>
            <div id='div2v' class='divbox'>
                <img id='img2v' class='img'>
                <span id='word2v' class='showwords'></span>
            </div>
        </div>

        <img id='item2-1' src='{$skinurl}skin/shengri/qiqiu.png'>
        <img id='item2-2' src='{$skinurl}skin/shengri/hua22.png'>
        <img id='item2-3' src='{$skinurl}skin/shengri/liwu2.png'>
        <img id='item2-4' src='{$skinurl}skin/shengri/hua21.png'>
    </div>

    <div id='page3' class='page'>
        <img id='item3-1' src='{$skinurl}skin/shengri/zi.png'>

        <div id='div3'>
            <div id='div3h' class='divbox'>
                <img id='img3h' class='img'>
                <span id='word3h' class='showwords'></span>
            </div>
            <div id='div3v' class='divbox'>
                <img id='img3v' class='img'>
                <span id='word3v' class='showwords'></span>
            </div>
        </div>

        <img id='item3-2' src='{$skinurl}skin/shengri/quan2.png'>
        <img id='item3-3' src='{$skinurl}skin/shengri/hua31.png'>
        <img id='item3-4' src='{$skinurl}skin/shengri/liwu1.png'>
        <img id='item3-5' src='{$skinurl}skin/shengri/hua32.png'>
        <img id='item3-6' src='{$skinurl}skin/shengri/zhang.png'>

    </div>

    <div id='page4' class='page'>
        <img id='item4-1' src='{$skinurl}skin/shengri/zi.png'>

        <div id='div41'>
            <div id='div41h' class='divbox'>
                <img id='img41h' class='img'>
                <span id='word41h' class='showwords'></span>
            </div>
            <div id='div41v' class='divbox'>
                <img id='img41v' class='img'>
                <span id='word41v' class='showwords'></span>
            </div>
        </div>
        <div id='div42'>
            <div id='div42h' class='divbox'>
                <img id='img42h' class='img'>
                <span id='word42h' class='showwords'></span>
            </div>
            <div id='div42v' class='divbox'>
                <img id='img42v' class='img'>
                <span id='word42v' class='showwords'></span>
            </div>
        </div>
        <img id='item4-2' src='{$skinurl}skin/shengri/lihua42.png'>
        <img id='item4-3' src='{$skinurl}skin/shengri/quan3.png'>
        <img id='item4-4' src='{$skinurl}skin/shengri/tang.png'>
        <img id='item4-5' src='{$skinurl}skin/shengri/qiqiu2.png'>
        <img id='item4-6' src='{$skinurl}skin/shengri/lihua2.png'>
    </div>

    <div id='page5' class='page'>
        
        <img id='item5-3' src='{$skinurl}skin/shengri/zi.png'>

        <div id='div51'>
            <div id='div51h' class='divbox'>
                <img id='img51h' class='img'>
                <span id='word51h' class='showwords'></span>
            </div>
            <div id='div51v' class='divbox'>
                <img id='img51v' class='img'>
                <span id='word51v' class='showwords'></span>
            </div>
        </div>
        <div id='div52'>
            <div id='div52h' class='divbox'>
                <img id='img52h' class='img'>
                <span id='word52h' class='showwords'></span>
            </div>
            <div id='div52v' class='divbox'>
                <img id='img52v' class='img'>
                <span id='word52v' class='showwords'></span>
            </div>
        </div>

        <img id='item5-1' src='{$skinurl}skin/shengri/hua52.png'>
        <img id='item5-2' src='{$skinurl}skin/shengri/liwu1.png'>
        <img id='item5-4' src='{$skinurl}skin/shengri/hua51.png'>
        <img id='item5-5' src='{$skinurl}skin/shengri/mao5.png'>
        <img id='item5-6' src='{$skinurl}skin/shengri/quan3.png'>
    </div>

    <div id='page6' class='page'>
        <div id='div61'>
            <div id='div61h' class='divbox'>
                <img id='img61h' class='img'>
                <span id='word61h' class='showwords'></span>
            </div>
            <div id='div61v' class='divbox'>
                <img id='img61v' class='img'>
                <span id='word61v' class='showwords'></span>
            </div>
        </div>
        <div id='div62'>
            <div id='div62h' class='divbox'>
                <img id='img62h' class='img'>
                <span id='word62h' class='showwords'></span>
            </div>
            <div id='div62v' class='divbox'>
                <img id='img62v' class='img'>
                <span id='word62v' class='showwords'></span>
            </div>
        </div>

        <img id='item6-1' src='{$skinurl}skin/shengri/zi.png'>
        <img id='item6-2' src='{$skinurl}skin/shengri/lihua62.png'>
        <img id='item6-3' src='{$skinurl}skin/shengri/liwu1.png'>
        <img id='item6-4' src='{$skinurl}skin/shengri/hua21.png'>
        <img id='item6-5' src='{$skinurl}skin/shengri/mianju.png'>

    </div>




    <div id='page0' class='page'>
        <img id='zi' src='{$skinurl}skin/shengri/zi.png'>
        <div id='pagetitle' style='position:absolute;width:440px;height:220px;top:350px;left:30px;'>
            <div style='position:absolute;width:440px;height:220px;top:0px;left:0px;overflow:hidden;display:table'>
                    <div id='titlecontent' style='width:440px;height:220px;vertical-align:middle;display:table-cell;text-align:center;font-size:35px;line-height:60px;color:#ff8800;text-shadow:#fff 3px 0 0,#fff 0 3px 0,#fff -3px 0 0,#fff 0 -3px 0;'></div>
            </div>
        </div>
        <img id='item0-1' src='{$skinurl}skin/shengri/lihua42.png'>
        <img id='item0-2' src='{$skinurl}skin/shengri/hua21.png'>
    </div>

</div>

<script>
var colors = ['#9ed4bc','#ba7db9','#c6d0e9','#f87d80','#f5b27e'];

function id(name)
{
    return document.getElementById(name)
}

function rand(min,max)
{
    return min+Math.floor(Math.random()*(max-min+1));
}

function showlihua()
{
    var container = id('container');
    for(var i = 0; i< 20 ; i++)
    {
        var div = document.createElement('div');
        var border = rand(10,16)
        div.style.width = border + 'px';
        div.style.height = border + 'px';
        div.style.backgroundColor = colors[rand(0,4)];
        div.style.position = 'absolute';
        div.style.top = '-50px';
        div.style.left = rand(-10,490) + 'px';
        div.style.webkitAnimation = 'fallinga '+ rand(8,12) + 's '+i*0.5+'s linear infinite both';
        div.style.zIndex = 1;
    
        container.appendChild(div);
    }

}

function showtitle()
{
    
    id('zi').style.webkitAnimation = 'aaa_in_bounce_down 1s ease both';
    id('pagetitle').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.5s ease both';
    id('titlecontent').innerHTML = e_title;
    id('item0-1').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item0-2').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';

}

function kuxuan()
{
    id('pagetitle').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.5s ease both';
    id('zi').style.webkitAnimation = 'aaa_out_bounce_up 1s ease both';
    id('item0-1').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.5s ease both';
    id('item0-2').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.5s ease both';

    timeout[1] = setTimeout(show1,1000)
}

function show1()
{
    setImage('1');
    showpage(1)
    id('item1-5').style.webkitAnimation = 'aaa_in_bounce_down 1s ease both';
    id('item1-1').style.webkitAnimation = 'aaa_in_bounce_left 1s 0.3s ease both';
    id('item1-2').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';
    id('div1').style.webkitAnimation = 'aaa_in_bounce_up 1s ease both';
    id('item1-3').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.5s ease both';
    id('item1-4').style.webkitAnimation = 'aaa_in_bounce_right 1s 0.5s ease both';

    timeout[2] = setTimeout(clear1,5000)
}

function clear1()
{
    id('item1-1').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item1-2').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';

    id('item1-3').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.3s ease both';
    id('item1-4').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.3s ease both';

    id('div1').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.6s ease both';
    id('item1-5').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.6s ease both';

    timeout[3] = setTimeout(show2,1200)
}

function show2()
{
    setImage('2');
    showpage(2);
    id('item2-1').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item2-2').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item2-3').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';
    id('item2-4').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';

    id('item2-5').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.5s ease both';
    id('div2').style.webkitAnimation = 'aaa_in_bounce_down 1s 0.5s ease both';

    timeout[4] = setTimeout(clear2,5000)
}

function clear2()
{
    id('item2-1').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.3s ease both';
    id('item2-2').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item2-3').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.3s ease both';
    id('item2-4').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';

    id('item2-5').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.5s ease both';
    id('div2').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.5s ease both';

    timeout[5] = setTimeout(show3,1500)
}

function show3()
{
    setImage('3');
    showpage(3);
    id('item3-1').style.webkitAnimation = 'aaa_in_bounce_down 1s 0.5s ease both';
    id('item3-2').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item3-3').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item3-4').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.3s ease both';
    id('item3-5').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';
    id('item3-6').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';

    id('div3').style.webkitAnimation = 'aaa_in_bounce_center 1s 0.5s ease both';

    timeout[6] = setTimeout(clear3,5000)
}

function clear3()
{
    id('item3-1').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.5s ease both';
    id('item3-2').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item3-3').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item3-4').style.webkitAnimation = 'aaa_out_bounce_down 1s ease both';
    id('item3-5').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';
    id('item3-6').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';

    id('div3').style.webkitAnimation = 'aaa_out_bounce_center 1s 0.5s ease both';

    timeout[7] = setTimeout(show4,1500)
   
}

function show4()
{
    setImage('41');
    setImage('42');
    showpage(4);
    id('item4-1').style.webkitAnimation = 'aaa_in_bounce_down 1s ease both';
    id('item4-2').style.webkitAnimation = 'aaa_in_bounce_left 1s 0.5s ease both';
    id('item4-6').style.webkitAnimation = 'aaa_in_bounce_right 1s 0.5s ease both';

    id('item4-3').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.8s ease both';
    id('item4-5').style.webkitAnimation = 'aaa_in_bounce_right 1s 0.8s ease both';
    id('item4-4').style.webkitAnimation = 'aaa_in_bounce_up 1s 1s ease both';

    id('div41').style.webkitAnimation = 'aaa_in_bounce_left 1s 1s ease both';
    id('div42').style.webkitAnimation = 'aaa_in_bounce_right 1s 1s ease both';

    timeout[8] = setTimeout(clear4,6000)
}

function clear4()
{
    id('item4-2').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item4-6').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';
    id('item4-3').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.2s ease both';
    id('item4-4').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.4s ease both';
    id('item4-5').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.4s ease both';
    id('item4-1').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.6s ease both';

    id('div41').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.6s ease both';
    id('div42').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.6s ease both';

    timeout[9] = setTimeout(show5,1500)
}

function show5()
{
    setImage('51');
    setImage('52');
    showpage(5);
    id('item5-1').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item5-4').style.webkitAnimation = 'aaa_in_bounce_up 1s ease both';
    id('item5-3').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.5s ease both';
    id('div51').style.webkitAnimation = 'aaa_in_bounce_left 1s 0.5s ease both';
    id('div52').style.webkitAnimation = 'aaa_in_bounce_right 1s 0.5s ease both';
    id('item5-6').style.webkitAnimation = 'aaa_in_bounce_down 1s 0.4s ease both';
    id('item5-2').style.webkitAnimation = 'aaa_in_bounce_up 1s 0.8s ease both';
    id('item5-5').style.webkitAnimation = 'aaa_in_bounce_down 1s 1.2s ease both';

    timeout[10] = setTimeout(clear5,6000)
}

function clear5()
{
    id('item5-1').style.webkitAnimation = 'aaa_out_bounce_left 1s ease both';
    id('item5-4').style.webkitAnimation = 'aaa_out_bounce_down 1s ease both';
    id('item5-2').style.webkitAnimation = 'aaa_out_bounce_down 1s 0.5s ease both';
    id('item5-5').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.5s ease both';
    id('item5-6').style.webkitAnimation = 'aaa_out_bounce_up 1s 0.7s ease both';

    id('item5-3').style.webkitAnimation = 'aaa_out_bounce_center 1s 0.7s ease both';
    id('div51').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.8s ease both';
    id('div52').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.8s ease both';

    timeout[11] = setTimeout(show6,1500)
}

function show6()
{
    setImage('61');
    setImage('62');
    showpage(6);
    id('item6-2').style.webkitAnimation = 'aaa_in_bounce_left 1s ease both';
    id('item6-4').style.webkitAnimation = 'aaa_in_bounce_right 1s ease both';
    id('item6-1').style.webkitAnimation = 'aaa_in_bounce_center 1s 0.5s ease both';
    id('div61').style.webkitAnimation = 'aaa_in_bounce_left 1s 0.5s ease both';
    id('div62').style.webkitAnimation = 'aaa_in_bounce_right 1s 0.5s ease both';
    id('item6-3').style.webkitAnimation = 'aaa_in_bounce_up 1s 1.5s ease both';
    id('item6-5').style.webkitAnimation = 'aaa_in_bounce_right 1s 1.5s ease both';

    timeout[12] = setTimeout(clear6,6000)
}

function clear6()
{
    id('item6-3').style.webkitAnimation = 'aaa_out_bounce_down 1s ease both';
    id('item6-5').style.webkitAnimation = 'aaa_out_bounce_right 1s ease both';
    id('item6-1').style.webkitAnimation = 'aaa_out_bounce_center 1s 0.5s ease both';
    id('item6-2').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.5s ease both';
    id('item6-4').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.5s ease both';
    id('div61').style.webkitAnimation = 'aaa_out_bounce_left 1s 0.5s ease both';
    id('div62').style.webkitAnimation = 'aaa_out_bounce_right 1s 0.5s ease both';

    timeout[13] = setTimeout(show1,1500)
}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=4000;
var timeout = [];
var showfont = false;

function id (name) 
{
    return document.getElementById(name);
}

//每次执行加载后10张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function loading()
{
    showlihua();
    load_images();
}

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }

    }
}
var divwidth  = {'1h':435,'1v':367,'2h':434,'2v':340,'3h':434,'3v':350,'41h':364,'42h':350,'41v':281,'42v':270,'51h':325,'51v':250,'52h':390,'52v':280,'61h':366,'61v':270,'62h':356,'62v':270};
var divheight = {'1h':350,'1v':500,'2h':320,'2v':459,'3h':320,'3v':479,'41h':272,'42h':283,'41v':373,'42v':362,'51h':250,'51v':332,'52h':294,'52v':387,'61h':273,'61v':362,'62h':265,'62v':360};

function insertEnter(str,n){
    var len = str.length;
    var strTemp = '';
    if(len > n){
    strTemp = str.substring(0,n);
    str = str.substring(n,len);
    return strTemp+'\n'+str;
    }else{
    return str;
    }
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';
    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var height = divheight[idname];
    var width = divwidth[idname];

    var img = id('img'+idname);
    img.src = Onload_imgs_url[image_url_index];
    // console.log('setimg:'+img.src);
    var word = id('word'+idname);
    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
        word.style.top = "90%";
        // word.style.backgroundColor = "rgba(255, 255, 255, 0.4)";
        var word_length = word_string.length;
        if(word_length <= 5)
        {
            word.style.fontSize = "28px";
        }else {
            word.style.fontSize = "25px";
            if(word_length > 10)
            {
                if(idname != "41v" && idname != "42v" && idname != "51v" && idname != "52v" && idname != "61v" && idname != "62v")
                    word_string = insertEnter(word_string, 5);
                word.style.top = "77%";
                // word.style.backgroundColor = "rgba(255, 255, 255, 0)";
            }
        }
        // word.style.width = "100%";
        word.innerText = word_string;
    }else 
    {
        word.innerText = "";
        // word.style.width = "0%";
    }

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}
call_me(loading)

function showpage(index)
{
    for(var i=0;i<6;i++)
    {
        if(i == index)
            id('page'+i).style.display = 'block';
        else
            id('page'+i).style.display = 'none';
    }
}

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i])
    }

    for(var i = 1;i<7;i++)
    {
        id('page'+i).style.display = 'none';
    }
    id('page0').style.display = 'block';



}
</script>
<!-- 模板结束 -->